<template>
  <div class="banner-add">

    <div class="createPost-main-container">
      <el-form ref="form" label-width="110px" :rules="rules" :model="form">
        <el-form-item label="搜索banner" prop="logo">
          <upload :data="imgData" />
        </el-form-item>

        <el-form-item label="页面标题" prop="name">
          <el-input v-model="form.title" type="text" />
        </el-form-item>

        <el-form-item label="页面描述" prop="name">
          <el-input v-model="form.desc" type="text" />
        </el-form-item>

      </el-form>
    </div>

    <sticky :class-name="'cms-sub-navbar '+ajaxStatus">
      <el-button :loading="ajaxStatus" style="margin-left: 10px;" type="success" @click="submitForm">
        发布
      </el-button>
    </sticky>

  </div>
</template>

<script>
import { postData, getEditData } from '@/api/product/search'
import Sticky from 'components/Sticky'
import Upload from 'components/Upload/img-upload'

const defaultForm = {
  id: '',
  imageUrl: '',
  title: '',
  desc: '',
  status: 0
}

export default {
  components: { Sticky, Upload },
  props: {},
  data() {
    const checkImg = (rule, value, callback) => {
      if (!this.imgData.imgUrl) {
        return callback(new Error('请上传图片'))
      }
      callback()
    }
    return {
      ajaxStatus: false,
      form: Object.assign({}, defaultForm),
      imgData: {
        myId: Math.random(),
        path: 'home',
        imgUrl: '',
        ImgSize: 10000,
        text: '图片大小不得超过10000K，支持png/jpg格式'
      },
      rules: {
        logo: { required: true, validator: checkImg }
      }
    }
  },
  computed: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取编辑数据
    fetchData() {
      getEditData().then(re => {
        const { data } = re
        this.form = data.content[0]
        this.imgData.imgUrl = this.form.imageUrl
      })
    },

    /**
     * 保存、发布接口
     *
     * id：保存为空，编辑传列表id
     */
    submitForm() {
      if (this.ajaxStatus) {
        return
      }
      this.ajaxStatus = true
      this.form.imageUrl = this.imgData.imgUrl
      this.$refs.form.validate(valid => {
        if (valid) {
          postData(this.form)
            .then(re => {
              this.ajaxStatus = false
              this.$notify({
                name: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
            })
            .catch(() => {
              this.ajaxStatus = false
            })
        } else {
          this.ajaxStatus = false
          this.$message.error('请正确填写完整信息后再发布')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.href-remark{
  color: #5e6d82;
  .red {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
}
.logo-card{
  margin-bottom: 10px;
}
</style>

